import { useNavigate } from 'react-router-dom'
import {
  Button,
  Card,
  CardHeader,
  Text,
  Title2,
  Title3,
  makeStyles,
  tokens,
  Badge
} from '@fluentui/react-components'
import {
  Play24Regular,
  Document24Regular,
  CheckmarkCircle24Filled,
  ErrorCircle24Filled,
  Clock24Regular
} from '@fluentui/react-icons'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: '32px',
    maxWidth: '1400px',
    margin: '0 auto',
  },
  header: {
    marginBottom: '24px',
  },
  statusSection: {
    display: 'flex',
    gap: '20px',
    marginBottom: '32px',
  },
  statsGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
    gap: '24px',
    marginBottom: '32px',
  },
  statCard: {
    padding: '24px',
    minHeight: '140px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  statHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '12px',
  },
  statValue: {
    fontSize: '36px',
    fontWeight: 'bold',
    color: tokens.colorBrandForeground1,
    lineHeight: '1.2',
  },
  quickActions: {
    display: 'flex',
    gap: '24px',
    padding: '24px',
  },
  actionButton: {
    minWidth: '180px',
    minHeight: '48px',
    fontSize: '16px',
  },
  statusBadge: {
    padding: '16px 24px',
  },
  sectionTitle: {
    fontSize: '24px',
    marginBottom: '8px',
  },
  sectionDescription: {
    fontSize: '16px',
    color: tokens.colorNeutralForeground2,
  }
})

const Dashboard = () => {
  const classes = useStyles()
  const navigate = useNavigate()

  // Mock 数据 - 参考 spam3-config.json
  const systemStatus = {
    mode: 'Server模式运行中',
    isRunning: true
  }

  const stats = {
    totalTasks: 1280,
    completed: 1120,
    failed: 60,
    currentConcurrency: 8,  // 参考 spam3-config.json 的 max_concurrency: 10
    maxConcurrency: 10
  }

  return (
    <div className={classes.container}>
      <div className={classes.header}>
        <Title2 className={classes.sectionTitle}>仪表盘</Title2>
        <Text className={classes.sectionDescription}>SPAM3-GO 爬虫管理系统概览</Text>
      </div>

      {/* 系统运行状态 */}
      <div className={classes.statusSection}>
        <Card className={classes.statusBadge}>
          <Badge 
            appearance="filled" 
            color={systemStatus.isRunning ? 'success' : 'danger'}
            size="large"
          >
            {systemStatus.mode}
          </Badge>
        </Card>
      </div>

      {/* 统计信息 */}
      <div className={classes.statsGrid}>
        <Card className={classes.statCard}>
          <div className={classes.statHeader}>
            <Title3>爬虫总任务数</Title3>
            <Clock24Regular style={{ fontSize: '24px' }} />
          </div>
          <Text className={classes.statValue}>{stats.totalTasks.toLocaleString()}</Text>
          <Text size={300} style={{ color: tokens.colorNeutralForeground2 }}>历史累计任务</Text>
        </Card>

        <Card className={classes.statCard}>
          <div className={classes.statHeader}>
            <Title3>已完成</Title3>
            <CheckmarkCircle24Filled style={{ color: tokens.colorPaletteGreenForeground1, fontSize: '24px' }} />
          </div>
          <Text className={classes.statValue}>{stats.completed.toLocaleString()}</Text>
          <Text size={300} style={{ color: tokens.colorNeutralForeground2 }}>成功完成的任务</Text>
        </Card>

        <Card className={classes.statCard}>
          <div className={classes.statHeader}>
            <Title3>失败</Title3>
            <ErrorCircle24Filled style={{ color: tokens.colorPaletteRedForeground1, fontSize: '24px' }} />
          </div>
          <Text className={classes.statValue}>{stats.failed.toLocaleString()}</Text>
          <Text size={300} style={{ color: tokens.colorNeutralForeground2 }}>执行失败的任务</Text>
        </Card>

        <Card className={classes.statCard}>
          <div className={classes.statHeader}>
            <Title3>当前并发数</Title3>
            <Play24Regular style={{ fontSize: '24px' }} />
          </div>
          <Text className={classes.statValue}>
            {stats.currentConcurrency} / {stats.maxConcurrency}
          </Text>
          <Text size={300} style={{ color: tokens.colorNeutralForeground2 }}>正在运行的并发任务</Text>
        </Card>
      </div>

      {/* 快捷入口 */}
      <Card>
        <CardHeader>
          <Title3>快捷操作</Title3>
        </CardHeader>
        <div className={classes.quickActions}>
          <Button
            appearance="primary"
            icon={<Play24Regular />}
            className={classes.actionButton}
            onClick={() => navigate('/crawler')}
          >
            启动爬虫
          </Button>
          <Button
            appearance="outline"
            icon={<Document24Regular />}
            className={classes.actionButton}
            onClick={() => navigate('/logs')}
          >
            查看日志
          </Button>
        </div>
      </Card>
    </div>
  )
}

export default Dashboard
